<template>  
    <div class="assetInventory">
        <div class="title">
            创建盘点任务
        </div>
        <el-form ref="form" :model="form" :rules="formRules" label-width="150px"  size='medium'  @submit.native.prevent>
                    <el-form-item label="任务名称：" prop="c_name" >
                        <el-input style="width:622px" v-model="form.c_name" placeholder="请输入" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="盘点时间" prop="time" >
                        <el-date-picker  value-format="yyyy-MM-dd" v-model="form.time"  type="daterange"   range-separator="至"  start-placeholder="开始日期"  end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="选择盘点开始方式：" prop="c_way" >
                        <el-radio-group v-model="form.c_way">
                            <el-radio :label="1">手动开始</el-radio>
                            <el-radio :label="2">按盘点开始时间到时启动</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择盘点方式：" prop="c_check_way">
                        <el-row >
                            <el-col :span="12">
                                <div class="grid">
                                    <el-checkbox v-model="form.c_check_way" :true-label='1' @change='changeCheck'>
                                    </el-checkbox>
                                    <span class="label">按仓库进行盘点</span>
                                    <span class="addfix">（盘点在用和闲置资产）</span>
                                    <div style="margin-left:25px">
                                        <el-tag type="info">默认当前管理员所管理的仓库</el-tag>
                                    </div>
                                    <div v-show="form.c_check_way==1" style="color: rgba(123, 123, 123, 1);font-size: 12px;margin-left:25px"> 共有 {{totol.asset_total||0}} 件资产，其中在用 {{totol.use_total||0}} 件，闲置 {{totol.xian_total||0}} 件，{{totol.dept_total||0}}个部门将参与盘点，{{totol.user_total||0}}名员工将参与盘点。 </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                               <div class="grid">
                                    <el-checkbox v-model="form.c_check_way" :true-label='2' @change='changeCheck'>
                                    </el-checkbox>
                                    <span class="label">按资产分类进行盘点</span>
                                    <span class="addfix">（盘点在用和闲置资产）</span>
                                    <el-button size="mini" @click.stop="bindClass" type="primary">选择资产分类</el-button>
                                    <div style="margin-left:25px">
                                        <el-tag closable :key="idx" v-for="(tag,idx) in classTags" style="margin-right:5px" :disable-transitions="false" @close="classTags.splice(idx,1)" type="info">{{tag.category_name}}</el-tag>
                                    </div>
                                    <div v-show="form.c_check_way==2" style="color: rgba(123, 123, 123, 1);font-size: 12px;margin-left:25px"> 共有 {{totol.asset_total||0}} 件资产，其中在用 {{totol.use_total||0}} 件，闲置 {{totol.xian_total||0}} 件，{{totol.dept_total||0}}个部门将参与盘点，{{totol.user_total||0}}名员工将参与盘点。 </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row >
                            <el-col :span="12">
                                 <div class="grid">
                                    <el-checkbox v-model="form.c_check_way" :true-label='3' @change='changeCheck'>
                                    </el-checkbox>
                                    <span class="label">按部门进行盘点</span>
                                    <span class="addfix">（只盘点在用资产，会自动过滤该仓库没有绑定的部门）</span>
                                    <el-button size="mini" style="margin-left:5px" @click="getDept" type="primary">选择部门</el-button>
                                    <div style="margin-left:25px">
                                        <el-tag closable :key="tag" v-for="(tag,index) in deptTags" style="margin-right:5px" :disable-transitions="false" @close="deptTags.splice(index,1)" type="info">{{tag.name}}</el-tag>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid">
                                    <el-checkbox v-model="form.c_check_way" :true-label='4' @change='changeCheck'>
                                    </el-checkbox>
                                    <span class="label">选择人员进行盘点 </span>
                                    <span class="addfix">（会自动过滤该仓库没有绑定的部门下的员工）</span>
                                    <el-button size="mini" style="margin-left:5px" @click="getMan" type="primary">选择人员</el-button>
                                    <div style="margin-left:25px">
                                        <el-tag closable :key="tag" v-for="(tag,index) in peopleTags" style="margin-right:5px" :disable-transitions="false" @close="peopleTags.splice(index,1)" type="info">{{tag.name}}</el-tag>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>

                    </el-form-item>
                    <el-form-item >
                        <div class="tip">四种盘点方式是单选，闲置资产派给仓库管理员进行盘点。</div>
                        <el-button  type="primary" @click="onSubmit">保存</el-button>
                        <el-button @click="reset">取 消</el-button>
                        
                    </el-form-item>
        </el-form>
        <!-- 资产选择 -->
        <class-tree ref="classTree" :wh_id='$store.state.warehouseOfAssetsManager'  :checkedKeys='checkedKeys' @bindAsstesType='bindAsstesType'/>
    </div>
</template>

<script>
 /* eslint-disable */ 
import moment from 'moment'
import {complexPicker,departmentsPicker} from "@/libs/utils" /**封装选部门方法 */
import {getCategoriesApi,getCheckDept} from "@/api" 
import {addAssetcheck,getCheckCount } from "../api" 
import classTree from "@/components/classTree"
export default {
    name:"formvue",
    props: ['edit'],
    components:{classTree},
    data(){
        return{
            /**资产类别树默认选中 */
            checkedKeys: [],
            /**资产类别树数据 */
            menuItems: [],
            warehouseOptions:[],/**所有仓库 */
            form:{
                c_check_way:1,//盘点方式 1按仓库 2按资产分类 3按部门 4选择人员
                c_name:'',//盘点任务名称
                time:'',//盘点时间
                c_way:1,//盘点开始方式 1手动开始 2按盘点时间开始时间启动
                cids:'',//分类ID
                users:'',
                departments:'',
            },
            totol:{},
            formRules: {
                c_name: [ { required: true, message: '盘点任务名称不能为空', trigger: 'blur' }],/*盘点任务名称的校验*/
                time:[ { required: true, message: '盘点任务时间范围不能为空', trigger: 'blur' }],/*盘点任务时间范围的校验*/
                c_check_way:[{ required: true, message: '盘点任务方式不能为空', trigger: 'blur' }],/*盘点任务方式的校验*/
                c_way:[{ required: true, message: '盘点开始方式不能为空', trigger: 'blur' }],/*盘点开始方式的校验*/
            },
            classTags:[],
            deptTags:[],
            deptIds:'',
            peopleTags:[],
            people_ids:'',
            canntCheckDept:[],/**不可选部门 */
        }
    },
    created(){
        this.getCheckCount()
    },
    methods: {
        getData(){
            this.classTags = [],
            this.deptTags=[],
            this.deptIds='',
            this.peopleTags=[],
            this.getCheckCount()
        },
        /**创建新资产盘点任务 */
        onSubmit(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.form.cids = this.checkedKeys&&this.checkedKeys.length?this.checkedKeys.join(','):''
                    let params = JSON.parse(JSON.stringify(this.form))
                    params.wh_id = this.$store.state.warehouseOfAssetsManager
                    params.c_start_time = this.form.time[0]
                    params.c_end_time = this.form.time[1]
                    delete params.time
                    if(this.peopleTags.length==0&&this.form.c_check_way==4) return this.$message('选人盘点时，人员不能为空');
                    if(this.deptTags.length==0&&this.form.c_check_way==3) return this.$message('选按部门盘点时，部门不能为空');
                    addAssetcheck(params).then(res=>{
                        this.$emit('actionChange')
                    })
                    this.$refs['form'].resetFields();
                }
            });
        },
        /**获取不同盘点方式的详情 */
        getCheckCount(){
            getCheckCount( {
                wh_id:this.$store.state.warehouseOfAssetsManager,
                c_check_way:this.form.c_check_way,
                cids:this.form.c_check_way==1?'':this.checkedKeys&&this.checkedKeys.length?this.checkedKeys.join(','):'',
            }).then(res=>{
                this.totol = res
            })
        },
        /**重置 */
        reset(){
            this.$refs['form'].resetFields();
        },
        /**维修部门绑定资产类别 */
        bindAsstesType(keys,nodes){
            this.classTags = nodes
            this.checkedKeys  = this.classTags&&this.classTags.length?this.classTags.map(item=>{return item.id}):[]
            this.$refs.classTree.dialogIsShow = false
            this.getCheckCount()
        },
         /**点击显示分类弹窗 */
        bindClass(data){
            this.$refs.classTree.dialogIsShow = true
            this.getCheckCount()
        },
        /**选择部门 */
        getDept(){
                let that = this
                departmentsPicker(this,{pickedDepartments:this.deptIds?this.deptIds.join(','):[],disDept:[]},function(res){
                    that.deptIds = res.dept_id
                    that.deptTags = res.departments
                    that.form.departments = JSON.stringify(res.departments)
                })
        },
        /**选择人员 */
        getMan(){
          let that = this
          complexPicker(that,{bool:true,useridArr:that.people_ids?that.people_ids.split(','):[]},function(res){
              that.people_ids=res.user_id
              that.peopleTags = res.users
              that.form.users = JSON.stringify(res.users)
          })
        },
        changeCheck(val){
           if(!val)this.form.c_check_way = ''
           this.$refs.classTree.dialogIsShow = false
           if(val&&(val<3))this.getCheckCount()
        }
    },
}
</script>

<style lang="stylus" scoped>
.assetInventory
    background-color #FFFFFF
    padding 40px
    .title
        height: 50px;
        line-height: 50px;
        background-color: rgba(247, 247, 251, 1);
        padding-left 30px
        margin-bottom 25px
    .tip
        line-height : 20px;
        color: rgba(166, 164, 164, 1);
        font-size: 14px;
        margin-bottom 48px
    .grid
        border-radius: 5px;
        background-color: rgba(251, 251, 253, 1);
        border: 1px solid rgba(235, 233, 240, 1);
        margin 10px 20px 10px 0
        padding 20px 15px
        height 100%
    .label
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        margin-left 8px
    .addfix 
        color: rgba(168, 168, 168, 1);
        font-size: 14px;
                
</style>
